import React, { PureComponent } from 'react'
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style'
import Topic from './components/Topic'
import List from './components/List'
import { connect } from 'react-redux'
import { actionCreators } from './store'

class Home extends PureComponent {
  componentDidMount() {
    this.props.changeHomeData()
    this.bindEvents()
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.props.changeScroll)
  }

  bindEvents = () => {
    window.addEventListener('scroll', this.props.changeScroll)
  }

  handleTop = () => {
    window.scrollTo(0, 0)
  }

  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/4546/dd55f322074ccec0be40c927e0705ef137f848b2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="" />
          <Topic />
          <List />
        </HomeLeft>
        <HomeRight></HomeRight>
        {this.props.isShow ? <BackTop onClick={this.handleTop}>↑</BackTop> : null}
      </HomeWrapper>
    )
  }
}

const mapStateToProps = (state) => ({
  isShow: state.getIn(['home', 'showTop']),
})

const mapDispatchToProps = (dispatch) => ({
  changeHomeData() {
    dispatch(actionCreators.getHomeInfo())
  },
  changeScroll() {
    document.documentElement.scrollTop > 200 ? dispatch(actionCreators.isShowTop(true)) : dispatch(actionCreators.isShowTop(false))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)